<!doctype html>
<html>
<head>
	<title>DataBind : Example4</title>
	
	<link href="Styles/static.css" type="text/css" rel="Stylesheet" />
	
	<script type="text/javascript" src="Scripts/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="Scripts/jquery.databind.min.js"></script>
		
	<script type="text/javascript">
	    $(document).ready(function() {

	        var map = { gender: '#drpGender', genders: '#drpGender' };
	        var data = { name: 'Billy Bob', age: 55, genders: [[0, 'Female'], [1, 'Male']], gender: 1 };

	        //Bind with a map and a function
	        $('#form1').binddata(data, map, function(args) {

	            //Set selector
	            if (args.selector == '#name') { args.selector = '#txtName'; };
	            if (args.selector == '#age') { args.selector = '#txtAge'; };

	            return true;
	        });
	    });
	    
	</script>
	
</head>
<body>

    <form id="form1" action="#">
        <label for="txtName" >Name</label><input type="text" id="txtName" /><br />
        <label for="txtAge">Age</label><input type="text" id="txtAge" /><br />
        <label for="drpGender">Gender</label><select id="drpGender"></select>
    </form>
		
</body>
</html>
